<template>
  <div id="Content">
    <!-- 推荐列表 -->
    <div class="recommendation_list" style="margin-left: 26px;">
      <!-- 推荐卡片 -->
      <div class="recommendation_info" v-for="item in recommends"
        @click="toDetail(item.postId, item.postType, item.author)">
        <div class="img" style="height: 200px;">
          <el-image :src="item.post_image" style="height: 220px;width: 100%;" placeholder="">
            <div slot="error" class="image-slot">
              <el-image :src="item.postImg"></el-image>
            </div>
            <div slot='error' class='image-slot'>
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </div>
        <!-- 帖子内容 -->
        <div class="text" style="margin-top: 32px;padding: 0 16px;display: flex;flex-direction: column;">
          <el-tooltip :content="item.title" placement="bottom" effect="light">
            <span class="item-title" style="text-align: center;">{{ item.title }}</span>
          </el-tooltip>
          <div style="font-size: 14px;white-space: nowrap;overflow: hidden; text-overflow: ellipsis;">{{ item.content }}
          </div>
        </div>
        <div class="recommendation_user" style="display: flex; align-items: center; width: 100%;">
          <!-- 使用 img 标签，并加上 object-fit 防止图片变形 -->
          <img :src="item.userImg" style="width: 42px; height: 42px; border-radius: 46px; object-fit: cover;" />

          <!-- Name with max-width -->
          <span
            style="margin-left: 12px; max-width: 120px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;flex:20%;">
            {{ item.authorName }}
          </span>

          <!-- CreateTime with max-width -->
          <span style=" max-width: 120px; font-size: 14px;flex:20%; ">
            {{ item.postDate }}
          </span>
        </div>
      </div>
    </div>




    <!-- 生活分享 -->
    <div class="lifesharing" style="margin-top: 0px;width: 1020px;margin-bottom: 20px;margin-left: 60px;">
      <!-- 头部文字 -->
      <div style="padding: 10px 0;  font-size: 20px; color:#409EFF">
        生活分享
      </div>
      <el-card>
        <!-- 帖子列表 -->
        <div class="list" style="display: flex;padding: 0 20px;gap: 10px 12px;">
          <!-- 帖子 -->
          <div style="width: 300px;border: 1px solid #e5e7eb;border-radius: 20px;" v-for="item in lifesharing"
            @click="toDetail(item.postId, item.postType, item.author)">
            <!-- 帖子图片 -->
            <div class="postimg">
              <el-image :src="item.post_image" style="height: 220px;width: 100%;" placeholder="">
                <div slot="error" class="image-slot">
                  <el-image :src="item.postImg"></el-image>
                </div>
                <div slot='error' class='image-slot'>
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
            <div class="text" style="margin-top: 0px;padding: 0 16px;display: flex;flex-direction: column;">
              <el-tooltip :content="item.title" placement="bottom" effect="light">
                <span class="item-title" style="text-align: center;">{{ item.title }}</span>
              </el-tooltip>
              <div style="font-size: 14px;white-space: nowrap;overflow: hidden; text-overflow: ellipsis;">{{
                item.content }}
              </div>
              <div class="recommendation_user"
                style="display: flex; align-items: center; width: 100%;margin-top: 26px;margin-bottom: 20px;">
                <!-- 使用 img 标签，并加上 object-fit 防止图片变形 -->
                <img :src="item.userImg" style="width: 42px; height: 42px; border-radius: 46px; object-fit: cover;" />
                <span
                  style="margin-left: 12px; max-width: 120px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;flex:20%;">
                  {{ item.authorName }}
                </span>
                <span style="margin-left: 12px; max-width: 120px; font-size: 14px; flex:20%;">
                  {{ item.postDate }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>




    <!-- 学习交流 -->
    <div class="lifesharing" style="margin-top: 10px;width: 1020px;margin-bottom: 20px;margin-left: 60px;">
      <!-- 头部文字 -->
      <div style="padding: 10px 0;  font-size: 20px; color:#E6A23C">
        学习交流
      </div>
      <el-card>
        <!-- 帖子列表 -->
        <div class="list" style="display: flex;padding: 0 20px;gap: 10px 12px;">
          <!-- 帖子 -->
          <div style="width: 300px;border: 1px solid #e5e7eb;border-radius: 20px;" v-for="item in learningexchanges"
            @click="toDetail(item.postId, item.postType, item.author)">
            <!-- 帖子图片 -->
            <div class="postimg">
              <el-image :src="item.post_image" style="height: 220px;width: 100%;" placeholder="">
                <div slot="error" class="image-slot">
                  <el-image :src="item.postImg"></el-image>
                </div>
                <div slot='error' class='image-slot'>
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
            <div class="text" style="margin-top: 0px;padding: 0 16px;display: flex;flex-direction: column;">
              <el-tooltip :content="item.title" placement="bottom" effect="light">
                <span class="item-title" style="text-align: center;">{{ item.title }}</span>
              </el-tooltip>
              <div style="font-size: 14px;white-space: nowrap;overflow: hidden; text-overflow: ellipsis;">{{
                item.content }}
              </div>
              <div class="recommendation_user"
                style="display: flex; align-items: center; width: 100%;margin-top: 36px;margin-bottom: 20px;">
                <!-- 使用 img 标签，并加上 object-fit 防止图片变形 -->
                <img :src="item.userImg" style="width: 42px; height: 42px; border-radius: 46px; object-fit: cover;" />
                <span
                  style="margin-left: 12px; max-width: 120px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex:20%;">
                  {{ item.authorName }}
                </span>
                <span style="margin-left: 36px; max-width: 120px; font-size: 14px; flex:20%;">
                  {{ item.postDate }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>








  </div>
</template>

<script>
import API from "@/api/request";
export default {
  data() {
    return {
      // 首页学习交流推荐帖子
      learningexchanges: [],
      //首页生活分享推荐帖子
      lifesharing: [],
      //推荐
      recommends:[]

    }
  },
  methods: {
    getlearningexchanges() {
      API.get("/api/learningExchange/pageList").then(res => {
        if (res.data.code === 200) {
          console.log(res.data.data.records)
          this.learningexchanges = res.data.data.records;
          this.learningexchanges.forEach(item => {
            item.postDate = this.formatDate(item.postDate);
          });
        }

      })
    },
    getlifesharings() {
      API.get("/api/lifeSharing/pageList").then(res => {
        if (res.data.code === 200) {
          this.lifesharing = res.data.data.records;
          console.log(this.lifesharing)
          this.lifesharing.forEach(item => {
            item.postDate = this.formatDate(item.postDate);
          });
        }
      })
    },
    //获取推荐帖子
    getrecommends() {
      API.get("/api/plateManagement/recommend").then(res => {
        if (res.data.code === 200) {
          this.recommends=res.data.data;
          this.recommends.forEach(item => {
            item.postDate = this.formatDate(item.postDate);
          });
        }
      })
    },
    //跳转详情页
    toDetail(id, type, stuId) {
      console.log("点击了")
      this.$router.push({ path: '/detail', query: { id: id, type: type, stuId: stuId } })
    },
    // 函数：去除时分秒，只保留日期部分
    formatDate(dateString) {
      const date = new Date(dateString); // 将字符串转换为 Date 对象
      return date.toISOString().split('T')[0]; // 获取 yyyy-mm-dd 部分
    }

  },
  created() {
    this.getlearningexchanges();
    this.getlifesharings();
    this.getrecommends();
  },

}
</script>
<style>
.Content {}

.recommendation_list {
  margin-top: 10px;
  height: 420px;
  padding: 10px;
  display: flex;

}

.recommendation_list>.recommendation_info {
  height: 386px;
  width: 280px;
  margin-left: 36px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background-color: rgb(255, 253, 253);
}

.recommendation_list>.recommendation_info>.recommendation_user {
  margin-top: 16px;
  padding: 8px;
  display: flex;
  align-items: center;
}


/* 标题样式 */
.item-title {
  cursor: pointer;
  padding: 10px;
  /* 添加 padding 增加可点击区域 */
  display: inline-block;
  /* 保证元素是块级元素，能触发 hover */
}

.item-title:hover {
  color: orangered;
}

/* elementui样式 */
.el-image img {
  image-rendering: crisp-edges;
  /* 保证图片更清晰 */
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>